@charset "utf-8";
$color: #00b7ee;

.web {
  width: 1000px;
  margin: 0 auto;

  // 公共头部
  header {
    .border-top {
      width: 100%;
      height: 24px;
      background-color: $color;
    }

    .header-content {
      display: flex;
      align-items: center;
      height: 116px;

      .logo {
        margin-left: 73px;
        margin-right: 70px;
        width: 121px;
        height: 63px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      // 导航
      nav {
        ul {
          display: flex;

          li {
            margin-right: 14px;

            a {
              color: #000000;
              text-decoration: none;
            }
          }

          li.active {
            position: relative;

            &::after {
              content: '_';
              position: absolute;
              top: 7px;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }

      // 搜索框
      .search {
        margin-left: 34px;
        width: 216px;
        height: 30px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 7px;
          right: 5px;
          width: 26px;
          height: 21px;
          // background: url(../image/header/search.png);
        }

        input {
          width: 100%;
          height: 100%;
        }
      }
    }

    // 顶部大图
    .banner {
      width: 100%;
      height: 400px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 底部
  footer {
    hr {
      width: 100%;
      height: 1px;
      background-color: $color;
      opacity: 0.1;
    }

    .footer {
      display: flex;
      margin-top: 44px;

      ul {
        font-size: 12px;

        &:first-child {
          margin-left: 51px;
          margin-right: 70px;
        }

        &:nth-child(2) {
          margin-right: 120px;
        }

        &:nth-child(3) {
          margin-right: 70px;
        }

        li {
          margin-bottom: 9px;

          &:first-child {
            margin-bottom: 26px;
            font-size: 16px;
            font-weight: 700;
          }

          a {
            color: #000000;
            text-decoration: none;
          }
        }
      }

      .connect {
        margin-left: 70px;
        width: 282px;
        height: 100px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    // 底部蓝色
    .border-bottom {
      width: 1000px;
      height: 70px;
      font-size: 12px;
      text-align: center;
      line-height: 100px;
      background-color: $color;
    }
  }
}
